<template>
    <view>
        <!-- pages/academy/index.wxml -->
        <!-- 轮播图 -->
        <view class="banner">
            <swiper class="swiper1" :indicator-dots="true" :autoplay="true" interval="2000" duration="300" indicator-active-color="#fff" :circular="true">
                <swiper-item>
                    <image src="http://lc-LXl0IGlm.cn-n1.lcfile.com/JOFW9lgWSBuM2bWm66ARyOYmFiEehT58/11.jpg" mode="aspectFill" />
                </swiper-item>
                <swiper-item>
                    <image src="http://lc-LXl0IGlm.cn-n1.lcfile.com/uySblr2A2uVL25W53IdeglxiiMz4jtOm/4.jpg" mode="aspectFill" />
                </swiper-item>

                <swiper-item>
                    <image src="http://lc-LXl0IGlm.cn-n1.lcfile.com/QnEwBMLIICYCrnOvgcxYI2tDnXlIOp1m/14FCC972BA7F4C1A773560FA305_F703562C_801F3.png" mode="aspectFill" />
                </swiper-item>
            </swiper>
        </view>
        <!-- 图标导航模块 -->
        <!-- <view class="flex justify-center"> -->
        <swiper class="swiper2" :indicator-dots="true" indicator-active-color="#3498DB">
            <swiper-item>
                <view class="box cu-list grid col-3 no-border">
                    <view class="cu-item" @tap="handleAcademy" v-for="(item, index) in ImgList" :key="index">
                        <image :src="item.img" />

                        <text>{{ item.name }}</text>
                    </view>
                </view>
            </swiper-item>

            <swiper-item>
                <view class="box cu-list grid col-3 no-border">
                    <view class="cu-item" v-for="(item, index) in imgList2" :key="index">
                        <image :src="item.img" />

                        <text>{{ item.name }}</text>
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <!-- </view> -->
    </view>
</template>

<script>
// pages/academy/index.js
export default {
    data() {
        return {
            ImgList: [
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/WvsU9ltVznp0K28aBurjUx6LhXMqjlhz/shuyuan1.jpg',
                    name: '观云书院'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/FjVPiKQoSVNxhfROif86vv2mWBhL4rjb/shuyuan2.jpg',
                    name: '古剑书院'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/lRK5HQNO63pIRUbOxCSBq6y4KYPKTWFE/shuyuan3.png',
                    name: '玉堂书院'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/1BsfcoLXryE58DV89INpqi99vI0qCD6A/shuyuan4.png',
                    name: '綦河书院'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/mPjuylPb4oy40RAF5QvGL5COiNMfhuMu/shuyuan5.png',
                    name: '横山书院'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/FnWbi1q0GltAUipX2tMaf1iPGdepeP2J/shuyuan6.jpg',
                    name: '瀛溪书院'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/55mWG6xA9fm3KsHDkMkJcsxPEWnbSmDi/shuyuan7.png',
                    name: '爱莲书院'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/b12q6XR6oBiU3XJGjS0Pwb70HF2DnNuV/shuyuan8.png',
                    name: '北山书院'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/1m7fzW1XJYPSA2v449gGbW1CcbPkPe68/shuyuan9.png',
                    name: '汇江书院'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/xSDjcNlFs6wVHBEgpRjSGdsYFvwQ0ogP/shuyuan10.png',
                    name: '花果书院'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/SC9RVbR7ELEhhrDp0LO2vFMUEKDp5LAz/shuyuan11.png',
                    name: '别都书院'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/XzxcS3CqqmsshrM0TawhjfsMVYjNsIFp/shuyuan12.png',
                    name: '廊桥书院'
                }
            ],
            imgList2: [
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/tdj2mFNwH0ObXkO2yrhHVezj206P1wIb/shuyuan13.png',
                    name: '南湖书院'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/2uAAOFRBJFIpK0VxbtpvyIyOJmL5OlBT/shuyuan14.png',
                    name: '天空书院'
                }
            ]
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        handleAcademy() {
            uni.navigateTo({
                url: '/pages/academy_list/index'
            });
        }
    }
};
</script>
<style>
/* pages/academy/index.wxss */
page {
    background-color: #f1f1f1;
}

.swiper2 {
    width: 740rpx;
    height: 820rpx;
    background-color: #f1f1f1;
    /* background-color: red !important; */
    margin: auto;
}

.swiper2 .box {
    width: 740rpx;
    height: 820rpx;
    border-radius: 5%;
    /* box-shadow: ; */
}

.cu-item {
    width: 130rpx;
    height: 150rpx;
    /* background-color:green; */
}

.cu-item image {
    width: 70rpx;
    height: 72rpx;
    margin: auto;
}

.swiper1 {
    width: 740rpx;
    height: 276rpx;
    /* border: 1rpx solid red; */
    margin: auto;
    margin-bottom: 50rpx;
    /* border-radius: 5%; */
    overflow: hidden;
    border-radius: 18rpx;
    box-sizing: border-box;
    transform: translateY(0);
    line-height: 1rpx;
}

swiper-item image {
    width: 100%;
    height: 100%;
}
</style>
